<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{ margin: 0px; padding: 0px;}
	</style>
	<body>
		<canvas id="myCanvas" style="background: #000000;"></canvas>
	</body>
</html>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
	
	window.onload = function(){
		console.log( Math.PI*2);
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ball = new Ball();
		ball.x = canvas.width/2;
		ball.y = canvas.height/2;
		var angle = 0;
        var speed = 0.2;
		var vx = 5;
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame, canvas);
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			vx += speed;
            ball.x += vx;
            
			
			ball.draw(ctx);
			
		}())
		
	}
	
	
</script>
